<template>
  <div class="treat">
    <div class="header" style="font-size: 18px">
      <div class="line"></div>
      待处理签约
    </div>
    <div class="nav">
      <div class="nav-item">
        <span class="text">签约状态</span>
        <el-select
          placeholder="请选择"
          v-model="agency.status"
          @change="statusChange"
        >
          <el-option label="全部" :value="null" />
          <el-option label="待审核" value="0" />
          <el-option label="待支付" value="1" />
          <el-option label="已驳回" value="2" />
        </el-select>
      </div>
      <div class="nav-item">
        <span class="text">签约机构</span>
        <el-select
          placeholder="请选择"
          v-model="agency.organId"
          @change="organIdChange"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in agencyOrgan"
            :key="index"
          />
        </el-select>
      </div>
      <div class="nav-item">
        <span class="text">医生团队</span>
        <el-select
          placeholder="请选择"
          v-model="agency.teamId"
          @change="serviceBasicChange"
          :disabled="doctorDis"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in TeamList"
            :key="index"
          />
        </el-select>
      </div>
      <div style="position: absolute; right: 0">
        <el-button type="primary" @click="excel">导出</el-button>
        <el-button type="warning" @click="clear">重置</el-button>
      </div>
    </div>
    <div class="nav">
      <div class="nav-item">
        <span class="text">服务包</span>
        <el-select
          placeholder="请选择"
          v-model="agency.serviceId"
          @change="ServiceChange"
          :disabled="serviceDis"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in ServiceBasicList"
            :key="index"
          />
        </el-select>
      </div>
      <div class="nav-item">
        <span class="text">选择日期</span>
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-model="time"
          @change="timeChange"
        />
      </div>
      <div class="nav-item" style="margin-right: 0">
        <el-input
          style="width: 370px"
          class="w-50 m-2"
          placeholder="备注"
          suffix-icon="Search"
          v-model="agency.searchKey"
          @change="searchKeyChange"
        />
      </div>
    </div>
    <el-table
      :data="agencyList"
      stripe
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column
        prop="number"
        label="编号"
        align="center"
        width="135px"
      />
      <el-table-column
        prop="rname"
        label="签约人姓名"
        align="center"
        width="110px"
      />
      <el-table-column
        prop="IDCard"
        label="身份证号"
        align="center"
        width="165px"
      />
      <el-table-column
        prop="tel"
        label="手机号码"
        align="center"
        width="110px"
      />
      <el-table-column prop="status" label="签约状态" align="center">
        <template #default="scope">
          <span v-if="scope.row.status == 0" style="color: #3dd4a7"
            >待审核</span
          >
          <span v-if="scope.row.status == 1" style="color: #fddb78"
            >待支付</span
          >
          <span v-if="scope.row.status == 2" style="color: #fa746b"
            >已驳回</span
          >
          <span v-if="scope.row.status == 3" style="color: #3d4cd4"
            >生效中</span
          >
          <span v-if="scope.row.status == 4" style="color: #9fd43d"
            >已过期</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="tname"
        label="签约医生团队"
        align="center"
        width="110px"
      />
      <el-table-column
        prop="sname"
        label="签约服务包"
        align="center"
        width="110px"
      />
      <el-table-column
        prop="takingEffectTime"
        label="生效时间"
        align="center"
        width="155px"
      />
      <el-table-column
        prop="address"
        label="操作"
        align="center"
        width="150px"
        fixed="right"
      >
        <template #default="scope">
          <el-link type="primary" @click="agencyInfo(scope.row.id)"
            >查看详情</el-link
          >
          <el-link type="primary" @click="agencyModify(scope.row.id)"
            >编辑</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="agency.page"
      v-model:page-size="agency.count"
      :page-sizes="[1, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="agencyTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import api from "@/api";
import { agencyType } from "@/types/yzy/agency";
import { useRouter } from "vue-router";
import sj from "@/utils/yzy/sj";
import { ElMessage } from "element-plus";
import { getExcel } from "@/utils/yzy/Excel";
const router = useRouter();
//选中的行
const checkRow = ref([]);
//时间
const time = ref();
//医生团队
const doctorDis = ref(true);
//服务包
const serviceDis = ref(true);
//签约参数
const agency = ref<agencyType>({
  status: null,
  organId: null,
  teamId: null,
  serviceId: null,
  startTime: null,
  endTime: null,
  searchKey: null,
  page: 1,
  count: 10,
});
//获取签约列表
const getAgencyList = async () => {
  let result = await api.Agency.getAgencyApi(agency.value);
  if (result.data.code === 200) {
    agencyTotal.value = result.data.data.total;
    agencyList.value = result.data.data.result;
    agencyList.value = agencyList.value.filter((item) => {
      return item.status != 3 && item.status != 4;
    });
  }
};
//签约列表
const agencyList = ref([
  {
    id: "88579930-ee50-11ed-8059-0ba99686sd93",
    number: "20235121407123",
    rname: "白素",
    IDCard: "512382188902120867",
    tel: "13366668888",
    status: 3,
    tname: "段宏团队",
    dname: "段宏",
    sname: "老人服务包",
    takingEffectTime: "2023-05-17 00:00:00",
    period: 1,
  },
  {
    id: "67e98bc0-ee1b-11ed-8459-c76f227cdls2",
    number: "20235121408192",
    rname: "小青",
    IDCard: "513777188109182673",
    tel: "18899991111",
    status: 3,
    tname: "段宏团队",
    dname: "段宏",
    sname: "老人服务包",
    takingEffectTime: "2023-05-13 00:00:00",
    period: 1,
  },
]);
//机构列表
const agencyOrgan = ref([
  {
    address: "四川省成都市武侯区致民东路8号",
    contactName: "李瑞",
    contactTel: "(028)85434379",
    description:
      "成都市武侯区望江路社区卫生服务中心是政府举办的公益性医疗机构。中心系四川省全科医学中心社区培训基地、华西医院全科医学基层实践基地，同时还是四川大学华西医院、四川省人民医院、成都市第二人民医院等医院的对口辅导和双向转诊单位。2018年被国家卫生计生委评为“全国优质服务示范社区卫生服务中心”。",
    flag: 0,
    id: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    name: "成都市武侯区望江路社区卫生服务中心",
    number: "2023591753249",
    picture: "",
  },
]);
//团队列表
const TeamList = ref([
  {
    id: "88579930-ee50-11ed-8059-0ba99686esd1",
    number: "202359172987",
    name: "陈晓平团队",
    picture: "public/upload/u5598.png",
    organId: "67e98bc0-ee1b-11ed-8459-c76f227ca578",
    score: 5,
    shareCount: 0,
    status: 0,
    flag: 0,
  },
]);
//服务包列表
const ServiceBasicList = ref([
  {
    id: "7909bde0-828b-11ed-a736-b1a95d18c716",
    name: "0~6岁儿童服务包",
    targetAudience: "0~6岁儿童",
    picture: "public/upload/u4827.png",
    labelArr: [
      {
        name: "儿童",
      },
    ],
  },
]);
//签约总数
const agencyTotal = ref(0);
//分布器
const handleSizeChange = (e: string) => {
  //一页多少
  agency.value.count = e;
  getAgencyList();
};
const handleCurrentChange = (e: string) => {
  //第几页
  agency.value.page = e;
  getAgencyList();
};
//查看详情
const agencyInfo = (id: any) => {
  router.push({ path: "/home/Agency/treatInfo", query: { id } });
};
//编辑
const agencyModify = (id: any) => {
  router.push({ path: "/home/Agency/treatModify", query: { id } });
};
//导出
//选中
const select = (e: any) => {
  checkRow.value = e;
};
//全选
const selectAll = (e: any) => {
  checkRow.value = e;
};
//导出
const excel = () => {
  if (checkRow.value.length == 0) {
    ElMessage.warning("请选择要导出的数据");
  } else {
    getExcel(checkRow.value);
  }
};
//签约状态更改
const statusChange = () => {
  getAgencyList();
};
//签约机构更改
const organIdChange = () => {
  getAgencyList();
  getTeamByOrganId(); //团队
  doctorDis.value = false;
  agency.value.serviceId = null;
  agency.value.teamId = null;
};
//医生团体更改
const serviceBasicChange = () => {
  getAgencyList();
  getServiceBasic();
  serviceDis.value = false;
  agency.value.serviceId = null;
};
//服务包更改
const ServiceChange = () => {
  getAgencyList();
};
//时间更改
const timeChange = () => {
  agency.value.startTime = sj(time.value[0]);
  agency.value.endTime = sj(time.value[1]);
  getAgencyList();
};
//关键字更改
const searchKeyChange = () => {
  getAgencyList();
};
//重置
const clear = () => {
  doctorDis.value = true;
  serviceDis.value = true;
  agency.value.status = null;
  agency.value.organId = null;
  agency.value.teamId = null;
  agency.value.serviceId = null;
  agency.value.startTime = null;
  agency.value.endTime = null;
  time.value = null;
  agency.value.searchKey = null;
  getAgencyList(); //列表
};
//获取所有机构
const getAllChcsOrgan = async () => {
  let result = await api.Agency.getAllChcsOrganApi();
  agencyOrgan.value = result.data.data.rows;
  // console.log(agencyOrgan.value);
};
//根据机构获取团队
const getTeamByOrganId = async () => {
  let result = await api.Agency.getTeamByOrganId(agency.value.organId);
  TeamList.value = result.data.data;
  console.log(result.data.data);
};
//根据团队获取服务包
const getServiceBasic = async () => {
  console.log(agency.value.teamId);
  let result = await api.Agency.getServiceBasicApi(agency.value.teamId);
  ServiceBasicList.value = result.data.data;
};

getAgencyList(); //列表
getAllChcsOrgan(); //机构
</script>

<style lang="scss">
.treat {
  width: 1150px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  min-height: 100vh;
  .header {
    @include flex(none, center, none);

    .line {
      width: 6px;
      height: 20px;
      background-color: skyblue;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
  .nav {
    position: relative;
    margin-top: 25px;
    @include flex(none, center, none);
    .text {
      display: inline-block;
      width: 55px;
      font-size: 13px;
      color: #999;
      text-align: right;
      margin-right: 15px;
    }
    .nav-item {
      margin-right: 20px;
      .el-date-editor {
        width: 360px;
      }
    }
    .el-input__wrapper {
      box-sizing: border-box;
      width: 200px;
      height: 40px;
    }
    .el-button {
      height: 40px;
      color: white;
    }
  }
  .el-table {
    margin-top: 20px;
    height: 55vh;
    overflow: scroll;
    .cell {
      font-size: 13px;
      font-weight: 500;
      color: black;
    }
    .el-link {
      font-size: 13px;
      margin: 0 10px;
    }
  }
  .el-pagination {
    justify-content: end;
    margin: 20px 0;
  }
}
</style>
